import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'
// 准备dom容器
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)
// 方案2：准备dom容器 - createVNode + render 动态创建标签或者组件
const divVNode = createVNode('div', { class: 'xtx-message-container' })
render(divVNode, document.body)
// 🔔 虚拟DOM(对象)成功写入到页面后，可通过 el 属性获取到真实DOM节点
const div = divVNode.el
export default ({ message, type }) => {
  const vnode = createVNode(XtxMessage, { message, type })
  render(vnode, div)
  setTimeout(() => {
    render(null, div)
  }, 3000)
}
